<template>
  <pro-page-header content="参数配置" backRouteName="OrgList">
    <div class="wrap">
      <pro-table
        ref="proTableInst"
        :tableTitle="'【' + routeQuery.type + '】' + '参数列表'"
        :columns="columns"
        :request="fetchOrgParamPage"
        auto-height
      >
        <template #operation>
          <n-space>
            <n-button
              v-hasPermi="`orgParam:add`"
              type="primary"
              @click="handleAddDict"
            >
              新增
            </n-button>
          </n-space>
        </template>
      </pro-table>

      <n-drawer
        v-model:show="drawerShow"
        :width="500"
        resizable
        :maskClosable="false"
        @after-leave="resetOrgParamForm"
      >
        <n-drawer-content closable :title="handleTag">
          <pro-form
            ref="orgParamFormInst"
            v-model:form="orgParamForm"
            :options="orgParamFormOptions"
            :formProps="{
              labelPlacement: 'left'
            }"
          ></pro-form>

          <template #footer>
            <n-space>
              <n-button @click="drawerShow = false">取消</n-button>
              <n-button type="primary" @click="orgParamFormConfirm">
                确认
              </n-button>
            </n-space>
          </template>
        </n-drawer-content>
      </n-drawer>
    </div>
  </pro-page-header>
</template>

<script lang="ts" setup name="OrgParamList">
  import { ProTableInst } from '@/components/pro-table/type'
  import { ProFormInst } from '@/components/pro-form/type'
  import {
    useOrgParamApi,
    useOrgParamProForm,
    useOrgParamProTable
  } from './hooks'

  const routeQuery = await getRouteQuery<{
    type: string
    orgId: string
  }>(['type', 'orgId'], {
    isEncrypt: true,
    isValid: true
  })

  const proTableInst = ref<ProTableInst | null>(null)
  const orgParamFormInst = ref<ProFormInst | null>(null)

  const drawerShow = ref(false)
  const handleType = ref<'add' | 'edit' | ''>('')
  const handleTag = computed(() =>
    handleType.value === 'add' ? '新增参数' : '修改参数'
  )
  const { orgParamForm, resetOrgParamForm, orgParamFormOptions } =
    useOrgParamProForm({ handleType })

  const handleAddDict = () => {
    handleType.value = 'add'
    drawerShow.value = true
  }

  const handleEditOrgParam = (row) => {
    orgParamForm.value = row
    handleType.value = 'edit'
    drawerShow.value = true
  }

  const orgParamFormConfirm = async () => {
    if (await orgParamFormInst.value?.handleSubmit()) {
      fetchAddOrEditOrgParam()
    }
  }

  const { fetchOrgParamPage, fetchAddOrEditOrgParam, fetchDelOrgParam } =
    useOrgParamApi({
      orgId: Number(routeQuery.orgId),
      handleType,
      handleTag,
      drawerShow,
      orgParamForm,
      proTableInst
    })
  const { columns } = useOrgParamProTable({
    handleEditOrgParam,
    fetchDelOrgParam
  })
</script>

<style lang="less" scoped></style>
